<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        html,
        body {
            font-size: 18px;
        }
        /*登录*/

        .pcc_logo_case {
            width: 100%;
            height: 14rem;
            text-align: center;
        }

        .pcc_logo_case>img {
            width: 10rem;
            height: 10rem;
            border: none;
            margin-top: 2rem;
        }

        .pcc_fomr_case {
            width: 100%;
            height: auto;
        }

        .pcc_fomr_case li {
            width: 80%;
            height: 2.5rem;
            border-bottom: 1px solid #dddddd;
            margin: auto;
            display: flex;
        }

        .pcc_fomr_case li .pcc_item_input {
            width: 100%;
            height: 2.5rem;
            line-height: 2.5rem;
        }

        .pcc_fomr_case li .pcc_yzm_div {
            width: 30%;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 0.8rem;
            color: #e6421e;
            text-align: center;
        }

        .pcc_fomr_case li .pcc_item_input input {
            width: 100%;
            height: 1.5rem;
            font-size: 0.8rem;
            text-indent: 0.7rem;
            outline: none;
            line-height: 1.5rem
        }

        .pcc_submit_bnt {
            width: 80%;
            height: 2.8rem;
            border-radius: 2.8rem;
            display: block;
            margin: 2rem auto;
            color: #ffffff;
            outline: none;
            cursor: pointer;
            background-color: #e6421e;
            box-shadow: 0 3px 6px rgba(230, 66, 30, 0.21), 0 6px 6px rgba(230, 66, 30, 0.26);
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            font-size: 0.9rem;
            border-width: 0px;
            border-style: solid;
            text-align: center;
            font-weight: normal;
            font-style: normal;
        }

        .pcc_zczh {
            width: 80%;
            margin: auto;
            padding: 0 10px
        }

        .pcc_zczh span {
            font-size: 0.8rem;
            color: #e6421e;
            display: block;
            float: right;
        }
    </style>
</head>

<body>
    <div class="pcc_logo_case">
        <img src="../image/logoimg.png" alt="logo" />
    </div>
    <ul class="pcc_fomr_case">
        <li>
            <div class="pcc_item_input">
                <input type="number" placeholder="请输入您的手机号" id="pcc_us_number" maxlength="11" />
            </div>
        </li>
        <li>
            <div class="pcc_item_input">
                <input type="password" id="login_code_input" placeholder="请输入密码" maxlength="16" pan/>
            </div>
            <div class="pcc_yzm_div" onclick="NewpasswordBtn();">忘记密码</div>
        </li>
    </ul>
    <button class="pcc_submit_bnt" onclick="minwinBtn();">登录</button>
    <p class="pcc_zczh"><span onclick="registrationBtn();">注册账号</span></p>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {

    };
    // 点击登录
    function minwinBtn() {
        if ($api.val($api.dom('#pcc_us_number')) == "" || !/^[1]([3][0-9]{1}|[5][0-9]{1}|[7][0-9]{1}|[8][0-9]{1})[0-9]{8}$/.test($api.val($api.dom('#pcc_us_number')))) { //验证手机号
            api.alert({
                title: '提示',
                msg: '手机号码错误！',
            }, function(ret, err) {

            });
            return false;
        }
        if ($api.val($api.dom('#login_code_input')) == "" || !/[A-Za-z0-9]{8,16}$/.test($api.val($api.dom('#login_code_input')))) { //验证密码
            api.alert({
                title: '提示',
                msg: '请输入8-16位长度的正确密码！',
            }, function(ret, err) {

            });
            return false;
        }

        api.openWin({
            name: 'min_win',
            url: './min_win.html',
            pageParam: {
                name: 'test'
            }
        });
    }

    // 忘记密码
    function NewpasswordBtn() {
        api.openFrame({
            name: 'Newpassword_fn',
            url: './Newpassword_fn.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'test'
            }
        });
    }
    // 打开注册页面
    function registrationBtn() {
        api.openFrame({
            name: 'registration_fn',
            url: './registration_fn.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'test'
            }
        });
    }
</script>

</html>
